<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:extension>
      
    </template>
    <template v-slot:RollingLow>
      <TimeChange @select="onSelectTimeChange" bottom="0"></TimeChange>
      <z-tab v-model:active="tabActive" :tabList="tabList" @click-tab="onClickTab"></z-tab>
      <z-search
        placeholder="请输入桌号/收银员"
        @query="onQuery"
        v-model="postForm.keyWord"
        @update:model-value="onUpdateVal"
      />
    </template>
    <div class="collect-container">
      <div class="collect-container-main">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
        >
          <div
            class="collect-main-item"
            v-for="(item, index) in info"
            :key="index"
          >
            <div class="item-header">
              <div class="item-header-table">
                <!-- 付款单号：{{ item.payBatchCode }} -->
                {{ item.roomName }}
              </div>
              <!-- <div class="item-header-price" :class="{turnRed:item.state==='未支付'}">
                {{ formatNumber(item.totalAmt) }}
                <div class="item-header-icon"></div>
              </div> -->
              <div class="item-header-price" >
                台单号：{{ item.consumeCode }}
                <!-- <div class="item-header-icon"></div> -->
              </div>
            </div>
            <ul class="item-center">
              <!-- <li class="item-center-li">
                <div class="li-left">桌台</div>
                <div class="li-right">{{ item.RoomName }}</div>
              </li> -->
              <!-- <li class="item-center-li">
                <div class="li-left">人数</div>
                <div class="li-right">{{ item.arrivedPeoperCount }}</div>
              </li> -->
              <li class="item-center-li">
                <div class="li-left">状态：</div>
                <div class="li-right">{{ item.state }}</div>
              </li>
              <li class="item-center-li">
                <div class="li-left">收银员：</div>
                <div class="li-right">{{ item.payUser?item.payUser:'-- --' }}</div>
              </li>
              <li class="item-center-li">
                <div class="li-left">金额：</div>
                <div class="li-right spe" :class="{turnRed:item.state==='未支付'}">{{ formatNumber(item.totalAmt) }}</div>
              </li>
              <li class="item-center-li">
                <div class="li-left">已付金额：</div>
                <div class="li-right">{{ formatNumber(item.payAmt) }}</div>
              </li>
              <li class="item-center-li">
                <div class="li-left">未付金额：</div>
                <div class="li-right" style="color: #FF3333;">{{ formatNumber(item.unPayAmt) }}</div>
              </li>
              <li class="item-center-li">
                <div class="li-left">开台时间：</div>
                <div class="li-right">
                  {{ dayjs(item.startTime).format('YYYY-MM-DD') }}
                  {{ dayjs(item.startTime).format('HH:mm:ss') }}
                </div>
              </li>
              <li class="item-center-li">
                <div class="li-left">清台时间：</div>
                <div class="li-right" v-if="item.endTime">
                  {{ dayjs(item.endTime).format('YYYY-MM-DD') }}
                  {{ dayjs(item.endTime).format('HH:mm:ss') }}
                </div>
                <div class="li-right" v-else>-- --</div>
              </li>
              <div class="item-center-detail" @click.stop="jump(item.orderBatchCode,item.roomCode,item.consumeCode,item.roomName)">
                详情
              </div>
            </ul>
            <!-- <div class="item-footer">
              <div class="item-footer-button" @click.stop="onTouch(index)">
                补打收银小票
              </div>
            </div> -->
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
  <!-- 确认提示 -->
  <z-dialog v-model:show="shouldConfirm" content="是否补打收银小票？" @confirm="print"></z-dialog>
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { showToast } from 'vant';
import { formatNumber } from '@/lib/util.js'

import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

const router = useRouter()

const info = ref([])
// 表单

const postForm = reactive({
  keyWord:'', // 房间号/收银员
  state: '1', // 1:未支付，2：已支付
  beginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.beginTime = startTime
  postForm.endTime = endTime
  loadData(true)
}
// -----------------------------------------------切换-----------------------------------------------------
const tabActive = ref(1)
const tabList = [{
    name: '全部',
}, {
    name: '未支付',
}, {
    name: '已支付',
}]
// 切换
const onClickTab = (e)=>{
    switch (e.name) {
      case 0: // 全部
        postForm.state = ''
      break;
      case 1: // 未支付
        postForm.state = '1'
      break;
      case 2: // 已支付
        postForm.state = '2'
      break;
    }
    console.log(postForm);
    loadData(true)
  }
//----------------------------------------------搜索---------------------------------------------------
const onQuery = () => {
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    loadData(true)
  }, 500)
}
// 跳转到详情
const jump = (value,roomCode,consumeCode,roomName) => {
  router.push({
    path: `/collect/collectdetails`,
    query: { orderBatchCode: value,roomCode:roomCode,consumeCode:consumeCode,roomName:roomName }
  })
}
const shouldConfirm = ref(false) // 弹窗确认
const arrIndex = ref('') // 数组下标
// 补打收银小票
const onTouch = (val) => {
  shouldConfirm.value = true
  arrIndex.value = val
}
const print = ()=>{
  Api.Common.AppObjProcess.Do({
    functionName: 'OrderPayPrint',
    contentData: {payBatchCode:info.value[arrIndex.value].payBatchCode}
  }).then((res)=>{
      showToast('补打收银小票成功')
      shouldConfirm.value = false
  } 
  )
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    info.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'getCashierSummary',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(info.value, nowList)
  console.log(info.value);
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {
  loadData(true)
}
onInit()
</script>

<style scoped lang="scss">
.collect-container {
  .collect-container-main {
    padding: 0 12px;
    .collect-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;
      .item-header {
        padding: 18px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #383840;
        .item-header-table {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 24px;
        }
        .item-header-price {
          // position: relative;
          font-size: 16px;
          // padding-right: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #cccccc;
          // color: #ffaa00; 
          line-height: 16px;
          &.turnRed{
            color: #FF3333;
          }
          // .item-header-icon {
          //   position: absolute;
          //   right: 0px;
          //   top: 3px;
          //   width: 6px;
          //   height: 11px;
          //   background-image: url('@/assets/svg/common/v_triangle_right_white.svg');
          //   background-repeat: no-repeat;
          //   background-position: center center;
          //   background-size: contain;
          // }
        }
      }
      .item-center {
        padding: 12px 24px 0;
        // border-bottom: 1px solid #383840;
        position: relative;
        .item-center-li {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          list-style: none;
          padding-bottom: 12px;
          .li-left {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 14px;
          }
          .li-right {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 13px;
            &.spe{
              color: #ffaa00;
            }
            &.turnRed{
              color: #FF3333;
            }
          }
        }
        .item-center-detail{
          position: absolute;
          right: 20px;
          bottom: 20px;
          background: #5C5C66;
          border-radius: 4px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;
          padding: 9px 17px;
        }
      }
      .item-footer {
        padding: 12px;
        display: flex;
        justify-content: flex-end;
        .item-footer-button {
          background: #5c5c66;
          border-radius: 4px;
          padding: 9px 13px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 14px;
        }
      }
    }
  }
}
</style>
